.piece {
  font-size: 2rem;
  font-weight: bold;
  border-radius: 50%;
  padding: 2px 6px;
  user-select: none;
  transition: background 0.2s, box-shadow 0.2s;
  display: inline-block;
}
.piece-svg {
  width: 1.8em;
  height: 1.8em;
  vertical-align: middle;
  display: inline-block;
}
.piece.player0 {
  color: #1a237e;
  background: #e3f2fd;
  border: 2px solid #1976d2;
}
.piece.player1 {
  color: #b71c1c;
  background: #ffebee;
  border: 2px solid #d32f2f;
}
.piece.animate {
  animation: move-pop 0.35s cubic-bezier(.4,2,.6,1) 1;
}
@keyframes move-pop {
  0% { transform: scale(1.2) rotate(-8deg); filter: brightness(1.2); }
  60% { transform: scale(0.9) rotate(4deg); filter: brightness(1.1); }
  100% { transform: scale(1) rotate(0); filter: brightness(1); }
} 